<template>
  <view class="con">

    <!-- 头部 -->
    <view class="topWrap">
      <view :style="{marginTop: systemBarHeight + 'px'}"></view>
      <view class="topssss">
        <image class="topssss_img" @click="fanuiBtn" mode="widthFix" src="/static/index/img29.png"></image>
        <view>我要互单</view>
      </view>
      <!-- 头部 -->
      <!-- <view class="guanc">
        <view class="guancC">
          <view class="guancCli flex flex_between">
            <view class="guancCliz flex">
              <image class="guancCliz_img" mode="widthFix" :src="peopleInfoPre.head"></image>
              <view class="guancCliz_v">
                <view class="guancCliz_v1">{{peopleInfoPre.nikename}}</view>
                <view class="guancCliz_v2">{{peopleInfoPre.nicknum}}</view>
              </view>
            </view>
            <view class="guancCliz_y flex">
              <view class="guancCliz_y1">{{peopleInfoPre.xian_min}}<text>min</text></view>
              <view class="guancCliz_y2">闲鱼互单<text>{{peopleInfoPre.xian_num}}</text>产品</view>
            </view>
          </view>
        </view>
      </view> -->
      <!-- 账号信息 -->
      <view class="shim flex">
        <view>
        </view>
        <view class="shim2">
          <image class="shim2_img" @click="fanuiBtn" mode="widthFix" :src="peopleInfoPre.head"></image>
        </view>
        <view>        
        </view>
      </view>
      <view class="shimb">
        <view class="shimb111">{{peopleInfoPre.nikename}}</view>
        <view class="shimb222">{{peopleInfoPre.nicknum}}</view>
      </view>
      <view class="kianh flex">
        <view class="chunfe" v-for="(item2,index) in huInfos.xian_info" :key="index">
          <text class="chunfe_t1">Fish</text>
          <text class="chunfe_t2">{{item2.nikename}}</text>
        </view>
      </view>
    </view>

    <!-- 下面内容 -->
    <view class="xiam">
      <view class="xiam_1 flex flex_between">
        <!-- 左边 -->
        <view class="xiam_1z">
          <view>
            <view class="xiam_1z1">{{infoPre.title}}</view>
            <view class="xiam_1z2 flex" @click="xiazaBtn(infoPre.pic)">
              <image class="xiam_1z2_img" mode="widthFix" src="/static/index/img24.png"></image>
              <view class="xiam_1z2_c">下载助Ta</view>
            </view>
          </view>
          <view class="xiam_1z3">
            <view class="xiam_1z3_v1">剩余{{infoPre.kc}}次</view>
            <view class="xiam_1z3_v2"><text
                :style="{width:(Number(infoPre.kc0)-Number(infoPre.kc))/Number(infoPre.kc0)*100+'%'}"></text></view>
          </view>
        </view>
        <!-- 右边 -->
        <view class="xiam_1y">
          <image class="xiam_1y_img" mode="widthFix" :src="infoPre.pic"></image>
        </view>
      </view>
      <view class="xiam_2 flex flex_between">
        <view class="xiam_2z flex">
          <view class="xiam_2z_v1">回单产品</view>
          <view class="xiam_2z_v2">{{hu_InfoSure.title}}</view>
        </view>
        <view class="xiam_2y" @click="selectShowBtn">选择</view>
      </view>
      <!-- 我要互单 -->
      <view class="hudanBtn" @click="huDanHandle">我要互单</view>
    </view>
    <view class="zhezhao" v-if="selectZhao" @click="hideTan"></view>
    <!-- 点击选择弹窗 -->
    <view class="xuanzTa" v-if="selectZhao">
      <view class="xuanzTa1">请选择回单产品</view>
      <scroll-view class="xuanzTa2" scroll-y @scrolltolower="reachBottom">
        <view class="xuanzTa2li flex flex_between" :class="hu_idpre===item.id?'active':''"
          v-for="(item,index) in myPeopleList" :key="index" @click="selectChanBtn(item)">
          <view class="xuanzTa2liz">{{item.title}}</view>
          <image class="xuanzTa2liy" mode="widthFix" src="/static/index/img21.png" v-if="hu_idpre!==item.id"></image>
          <image class="xuanzTa2liy" mode="widthFix" src="/static/index/img17.png" v-else></image>
        </view>
      </scroll-view>
      <view class="xuanzTa3 flex flex_between">
        <view class="quxiao" @click="hideTan">取消</view>
        <view class="queding" @click="sureBtn">我确定</view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    xianXianPeople,//会员的互单内容
    xianXianHuAdd //添加互单
  } from '@/request/api.js'
  export default {
    data() {
      return {
        openid: uni.getStorageSync('openid'), //获取缓存的openid
        userInfo:uni.getStorageSync('userInfo'),//获取我的信息
        selectZhao: false,
        hasData: true, //如果有互单数据了，那就不显示“我要互单”，直接显示“再来一单”
        systemBarHeight: 0,
        infoPre: {}, //前一个页面的信息
        peopleInfoPre: {}, //前一个页面的用户信息
        myPeopleList: [], //列表
        page: 1, //页码
        total: 0, //总共的数量
        pagesizes: 15, //每页数量
        hu_idpre: '', //只是显示，没有确认
        hu_id: '', //选择的回单产品id（对等的互助任务ID）
        hu_Info: {}, //选择的回单产品
        hu_InfoSure: {}, //最后确定时候，才能赋值
      };
    },
    onLoad(options) {
      console.log(options)
      this.infoPre = JSON.parse(options.info)
      this.peopleInfoPre = JSON.parse(options.peopleInfo)
      console.log('前一个页面获取的信息')
      console.log(this.infoPre)
      console.log(this.peopleInfoPre)
      this.getStatusBarHeight();
      this.getXianPeopleFun();
      this.userInfo = uni.getStorageSync('userInfo')
    },
    onShow() {
      // 清空选择的数据
      this.hu_idpre = ''
      this.hu_id = ''
      this.hu_Info = {}
      this.hu_InfoSure = {}
    },
    methods: {
      getStatusBarHeight() {
        uni.getSystemInfo({
            success: res => {
              console.log(res.statusBarHeight)
              this.systemBarHeight = res.statusBarHeight;
              console.log('是多少')
              console.log(this.systemBarHeight)
              const systemInfo = uni.getSystemInfoSync()
              if (systemInfo.osName === 'ios'){
                console.log('是苹果机')
              }
              if (systemInfo.osName === 'android'){
                console.log('是安卓机')
                this.systemBarHeight = res.statusBarHeight + 4;
              }
            }
          });
      },
      // 获取互单详细
      xianxianHuInfoFun() {
        let param = {
          openid: this.openid,
          id: this.infoPre.id
        }
        xianxianHuInfo(param).then(res => {
          if (res.error_code === 0) {

          } else {
            uni.showToast({
              icon: 'none',
              title: res.msg
            })
          }
        })
      },
      reachBottom() {
        let totolPage = Math.ceil(this.total / this.pagesizes)
        console.log('总共多少页')
        console.log(totolPage)
        if (this.page <= totolPage) {
          this.loadMore(); // 当上拉时加载更多数据
        }
      },

      // 加载更多
      loadMore() {
        console.log('走没走')
        this.page = this.page + 1
        this.getXianPeopleFun()
      },
      // 会员的互单内容
      getXianPeopleFun() {
        let that = this
        let param = {
          openid: this.openid,
          people: this.userInfo.id, //这里的id应该是当前用户的id，在登录后的我的信息里面去取
          page: this.page
        }
        console.log('会员的互单内容')
        console.log(param)
        xianXianPeople(param).then(res => {
          this.total = Number(res.data.total);
          this.pagesizes = Number(res.data.pagesizes);
          // this.myPeopleInfo = res.data
          let listRe = res.data.arrList
          if (listRe.length > 0) {
            that.myPeopleList = that.myPeopleList.concat(listRe);
          }
        })
      },
      // 点击选择--出现选择框
      selectShowBtn() {
        this.selectZhao = true
      },
      selectChanBtn(item) {
        console.log('选择的互单产品')
        console.log(item)
        this.hu_idpre = item.id
        this.hu_Info = item
      },
      // 点击确定
      sureBtn() {
        if (this.hu_idpre === '') {
          uni.showToast({
            icon: 'none',
            title: '请选择回单产品'
          })
        } else {
          console.log(this.hu_id)
          this.hu_InfoSure = this.hu_Info
          this.hu_id = this.hu_Info.id
          this.selectZhao = false
        }
      },
      // 点击我要互单
      huDanHandle(){
        if(this.hu_id===''){
          uni.showToast({
            icon: 'none',
            title: '请选择回单产品'
          })
        }else{
          let param = {
            openid:this.openid,
            id:this.infoPre.id,
            hu_id:this.hu_id
          }
          console.log('添加互单参数')
          console.log(param)
           
          xianXianHuAdd(param).then(res => {
            if (res.error_code === 0) {
              let detailId = res.data.id
              uni.navigateTo({
                url:'/packageA/index/woYaoHuiDanDe2?infoId='+detailId
              })
              uni.showToast({
                icon: 'success',
                title: res.msg
              })
            } else {
              uni.showToast({
                icon: 'none',
                title: res.msg
              })
            }
          })
        }
      },
      hideTan() {
        this.selectZhao = false
      },
      // 下载图片
      xiazaBtn(url){
        uni.downloadFile({
          url: url, //图片地址
          success: function(res) {
            console.log('成功---下载图片', res);
            //wx.saveImageToPhotosAlbum方法：保存图片到系统相册
            uni.saveImageToPhotosAlbum({
              filePath: res.tempFilePath, //图片文件路径
              success: function(data) {
                uni.hideLoading(); //隐藏 loading 提示框
                // uni.showModal({
                //   title: '提示',
                //   content: '保存成功',
                //   modalType: false,
                // })
                uni.showToast({
                  icon: 'none',
                  title: '下载成功'
                })
              },
              // 接口调用失败的回调函数
              fail: function(err) {
                if (err.errMsg ===
                  "saveImageToPhotosAlbum:fail:auth denied" || err
                  .errMsg ===
                  "saveImageToPhotosAlbum:fail auth deny" || err
                  .errMsg ===
                  "saveImageToPhotosAlbum:fail authorize no response"
                  ) {
                  wx.showModal({
                    title: '提示',
                    content: '需要您授权保存相册',
                    modalType: false,
                    success: modalSuccess => {
                      wx.openSetting({
                        success(settingdata) {
                          console.log("settingdata",
                            settingdata)
                          if (settingdata
                            .authSetting[
                              'scope.writePhotosAlbum'
                            ]) {
                            wx.showModal({
                              title: '提示',
                              content: '获取权限成功,再次点击图片即可保存',
                              modalType: false,
                            })
                          } else {
                            wx.showModal({
                              title: '提示',
                              content: '获取权限失败，将无法保存到相册哦~',
                              modalType: false,
                            })
                          }
                        },
                        fail(failData) {
                          console.log("failData", failData)
                        },
                        complete(finishData) {
                          console.log("finishData",
                            finishData)
                        }
                      })
                    }
                  })
                }
              },
              complete(res) {
                uni.hideLoading(); //隐藏 loading 提示框
              }
            })
          },
          fail: function(err) {
            console.log('失败---下载图片')
            console.log(err)
          }
        })
      },
      fanuiBtn() {
        uni.navigateBack({
          delta: 1
        });
      },
    }
  }
</script>

<style scoped lang="scss">
  page {
    padding: 0;
    margin: 0;
    background-color: rgba(238, 238, 238, 1);
  }

  .con {
    width: 100%;
    height: auto;
    padding: 0;
    margin: 0;
  }

  .topWrap {
    width: 100%;
    height: auto;
    background: linear-gradient(180deg, rgba(249, 191, 65, 1) 0%, rgba(238, 238, 238, 1) 100%);
    // background:rgba(249,191,65,1);
    color: rgba(16, 16, 16, 1);
    padding: 20rpx;
    box-sizing: border-box;
    padding-bottom: 0;

    .top {
      width: 100%;
      height: auto;

      .topz {
        width: 440rpx;
        height: 80rpx;
        border-radius: 100rpx;
        background-color: rgba(255, 246, 228, 1);
        color: rgba(136, 136, 136, 1);
        font-size: 28rpx;
        padding: 0 34rpx;
        box-sizing: border-box;

        .topz_ipu {
          color: #F9BF41;
        }

        .topz_img {
          width: 48rpx;
          height: auto;
        }
      }

      .topy {
        width: 242rpx;
        height: 80rpx;
        border-radius: 100rpx;
        background-color: rgba(255, 246, 228, 1);
        justify-content: center;

        .topyimg {
          width: 38rpx;
          height: auto;
        }

        .topy_t {
          color: rgba(249, 191, 65, 1);
          font-size: 28rpx;
          font-weight: bold;
          margin-left: 10rpx;
        }
      }
    }

    .top2 {
      background-color: rgba(255, 255, 255, 1);
      width: 100%;
      height: auto;
      border-radius: 20rpx;
      margin-top: 50rpx;
      padding: 30rpx 50rpx;
      box-sizing: border-box;

      .top2li {
        width: 190rpx;
        height: 90rpx;
        border-radius: 100rpx;
        background: linear-gradient(180deg, rgba(253, 230, 179, 1) 0%, rgba(255, 246, 246, 0) 100%);
        text-align: center;
        line-height: 90rpx;
        color: rgba(16, 16, 16, 1);
        font-size: 28rpx;
        font-weight: bold;
        position: relative;

        .top2lic_te {
          position: absolute;
          width: 48rpx;
          height: 24rpx;
          border-radius: 100rpx;
          background-color: rgba(216, 30, 6, 1);
          text-align: center;
          line-height: 24rpx;
          top: 0;
          right: 0;
          color: rgba(255, 255, 255, 1);
          font-size: 24rpx;
        }
      }
    }

    .top3 {
      width: 100%;
      padding: 0 10rpx;
      box-sizing: border-box;
      height: auto;
      margin-top: 54rpx;
      margin-bottom: 42rpx;
      word-break: break-all;

      text {
        word-break: break-all;
      }

      .top3_t1 {
        color: #D81E06;
        font-weight: bold;
        margin-right: 15rpx;
        font-size: 24rpx;
      }

      .top3_t2 {
        font-size: 24rpx;
      }
    }
  }

  .topssss {
    // margin-bottom: 0;
  }

  .guanc {
    width: 100%;
    height: auto;
    padding: 0;
    padding-top: 30rpx;
    padding-bottom: 0;
    box-sizing: border-box;

    // background: linear-gradient(180deg, rgba(249,191,65,1) 0%,rgba(238,238,238,1) 100%);
    .guancT {
      margin: 0 30rpx;
      color: rgba(0, 0, 0, 1);
      font-size: 36rpx;
      margin-bottom: 30rpx;
    }

    .guancC {
      width: 100%;
      height: auto;

      .guancCli {
        width: 100%;
        height: auto;
        height: 80px;
        padding: 30rpx;
        border-radius: 20rpx;
        background-color: rgba(255, 255, 255, 1);
        color: rgba(16, 16, 16, 1);
        font-size: 28rpx;
        box-sizing: border-box;
        margin-bottom: 20rpx;
      }

      .guancCliz {
        width: 40%;

        .guancCliz_img {
          width: 80rpx;
          height: 80rpx;
          border-radius: 100%;
          margin-right: 20rpx;
        }

        .guancCliz_v1 {
          line-height: 40rpx;
          color: rgba(16, 16, 16, 1);
          font-size: 28rpx;
        }

        .guancCliz_v2 {
          color: rgba(16, 16, 16, 1);
          font-size: 24rpx;
          line-height: 34rpx;
        }
      }
    }

    .guancCliz_y {
      width: 400rpx;
      justify-content: flex-end;
      margin-right: -40rpx;

      // background: #f00;
      .guancCliz_y1 {
        width: 160rpx;
        height: 80rpx;
        border-radius: 100rpx 0px 0px 100rpx;
        background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(255, 246, 228, 1) 100%);
        text-indent: 20rpx;
        color: rgba(249, 191, 65, 1);
        font-size: 28rpx;
        line-height: 80rpx;
        font-style: italic;
      }

      .guancCliz_y2 {
        width: 230rpx;
        height: 80rpx;
        border-radius: 100rpx;
        background: linear-gradient(180deg, rgba(249, 191, 65, 1) 0%, rgba(255, 246, 228, 1) 100%);
        font-size: 28rpx;
        line-height: 62rpx;
        position: relative;
        z-index: 1;
        left: -50rpx;
        text-align: center;
        color: rgba(0, 0, 0, 1);
        font-size: 24rpx;
        font-weight: bold;
        font-style: italic;

        text {
          color: rgba(216, 30, 6, 1);
          font-size: 48rpx;

        }
      }
    }

  }

  input::placeholder {
    color: #F9BF41;
  }

  .xiam {
    padding: 0 20rpx;
    width: 100%;
    height: auto;
    box-sizing: border-box;

    .xiam_1 {
      width: 100%;
      height: auto;
      padding: 30rpx;
      border-radius: 20rpx;
      background-color: rgba(255, 255, 255, 1);
      box-sizing: border-box;
      margin-bottom: 20rpx;

      .xiam_1z {
        width: 420rpx;
        height: 200rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .xiam_1z1 {
          width: 100%;
          line-height: 40rpx;
          color: rgba(16, 16, 16, 1);
          font-size: 28rpx;
          margin-bottom: 12rpx;
        }

        .xiam_1z2 {
          width: 180rpx;
          height: 44rpx;
          border-radius: 100rpx;
          background: linear-gradient(180deg, rgba(249, 191, 65, 1) 0%, rgba(255, 246, 228, 1) 100%);
          justify-content: center;

          .xiam_1z2_img {
            width: 32rpx;
            height: auto;
          }

          .xiam_1z2_c {
            color: rgba(0, 0, 0, 1);
            font-size: 24rpx;
          }
        }

        .xiam_1z3 {
          width: 100%;

          .xiam_1z3_v1 {
            line-height: 34rpx;
            color: rgba(137, 137, 137, 1);
            font-size: 24rpx;
            margin-bottom: 8rpx;
          }

          .xiam_1z3_v2 {
            width: 100%;
            height: 16rpx;
            border-radius: 20rpx;
            background-color: rgba(232, 230, 230, 1);
            position: relative;

            text {
              display: inline-block;
              border-radius: 20rpx;
              // background-color: rgba(249, 191, 65, 1);
              background: linear-gradient( to right, #f9bf41, #fff6e4);
              width: 120rpx;
              height: 16rpx;
              position: absolute;
              left: 0;
              top: 0;
            }
          }
        }
      }

      .xiam_1y {
        width: 200rpx;
        height: 200rpx;
        overflow: hidden;
        border-radius: 20rpx;
        .xiam_1y_img {
          width: 200rpx;
          height: 200rpx;
        }
      }
    }
  }

  .xiam_2 {
    width: 100%;
    height: auto;
    padding: 30rpx;
    border-radius: 20rpx;
    background-color: rgba(255, 255, 255, 1);
    box-sizing: border-box;

    .xiam_2z {
      .xiam_2z_v1 {
        color: rgba(137, 137, 137, 1);
        font-size: 28rpx;
        margin-right: 34rpx;
      }

      .xiam_2z_v2 {
        color: rgba(16, 16, 16, 1);
        font-size: 28rpx;
      }
    }

    .xiam_2y {
      width: 180rpx;
      height: 60rpx;
      border-radius: 60rpx;
      background: linear-gradient(180deg, rgba(249, 191, 65, 1) 0%, rgba(255, 246, 228, 1) 100%);
      color: rgba(16, 16, 16, 1);
      font-size: 12px;
      text-align: center;
      line-height: 60rpx;
    }
  }

  .hudanBtn {
    width: 100%;
    height: 92rpx;
    border-radius: 20rpx;
    background: linear-gradient(180deg, rgba(249, 191, 65, 1) 0%, rgba(255, 246, 228, 1) 100%);
    color: rgba(16, 16, 16, 1);
    font-size: 28rpx;
    margin-top: 20rpx;
    text-align: center;
    line-height: 92rpx;
  }

  .xuanzTa {
    width: 640rpx;
    height: 600rpx;
    border-radius: 20rpx;
    background-color: rgba(255, 255, 255, 1);
    color: rgba(16, 16, 16, 1);
    font-size: 28rpx;
    text-align: center;
    font-family: Roboto;
    position: fixed;
    z-index: 99;
    top: 50%;
    margin-top: -300rpx;
    left: 50%;
    margin-left: -320rpx;

    .xuanzTa1 {
      color: rgba(16, 16, 16, 1);
      font-size: 32rpx;
      margin: 44rpx 0;
    }

    .xuanzTa2 {
      width: 100%;
      height: 300rpx;
      overflow-y: auto;
      padding: 0 30rpx;
      box-sizing: border-box;
      margin-bottom: 40rpx;

      .xuanzTa2li {
        width: 100%;
        height: 80rpx;
        border-radius: 20rpx;
        line-height: 80rpx;
        padding: 0 30rpx;
        box-sizing: border-box;
        margin-bottom: 20rpx;
      }

      .xuanzTa2li.active {
        background-color: rgba(255, 246, 228, 1);
      }

      .xuanzTa2liz {
        color: rgba(16, 16, 16, 1);
        font-size: 28rpx;
      }

      .xuanzTa2liy {
        width: 28rpx;
        height: auto;
      }
    }

    .xuanzTa3 {
      width: 100%;
      height: auto;
      padding: 0 40rpx;
      box-sizing: border-box;

      .quxiao {
        width: 260rpx;
        height: 72rpx;
        line-height: 72rpx;
        border-radius: 100rpx;
        background-color: rgba(238, 238, 238, 1);
        color: rgba(16, 16, 16, 1);
        font-size: 14px;
      }

      .queding {
        width: 260rpx;
        height: 72rpx;
        line-height: 72rpx;
        border-radius: 100rpx;
        background-color: rgba(249, 191, 65, 1);
        color: rgba(16, 16, 16, 1);
        font-size: 14px;
      }
    }
  }

  .shcns {
    width: 100%;
    padding: 30rpx;
    box-sizing: border-box;
    height: auto;
    border-radius: 20rpx;
    background-color: rgba(255, 255, 255, 1);
    margin-top: 20rpx;

    .shcns_t1 {
      color: rgba(16, 16, 16, 1);
      font-size: 28rpx;
      margin-bottom: 20rpx;
    }

    .shcns_t2 {
      width: 100%;
      height: auto;
      border-radius: 20rpx;
      background-color: rgba(238, 238, 238, 1);
      text-align: center;
      line-height: 120rpx;
      color: rgba(16, 16, 16, 1);
      font-size: 28rpx;
    }

    .shcns_t3 {
      width: 100%;
      height: auto;
      overflow: hidden;
      margin-bottom: 10rpx;

      .shcns_t3z {
        width: 315rpx;
        height: 120rpx;
        border-radius: 20rpx;
        background-color: rgba(229, 229, 229, 1);
        overflow: hidden;
      }

      .shcns_t3y {
        width: 315rpx;
        height: 120rpx;
        border-radius: 20rpx;
        background-color: rgba(255, 246, 228, 1);
        text-align: center;
        line-height: 120rpx;
        color: rgba(16, 16, 16, 1);
        font-size: 28rpx;
        position: relative;

        .mengban {
          position: absolute;
          width: 100%;
          height: 120rpx;
          background-color: rgba(0, 0, 0, 0.5);
          top: 0;
          left: 0;
          color: rgba(255, 255, 255, 1);
          font-size: 24rpx;
          line-height: 120rpx;
          text-align: center;
          font-weight: bold;
          border-radius: 20rpx;
        }
      }
    }
  }
  .shim {
    width: 100%;
    height: auto;
    justify-content: space-around;
  
    .shim1 {
      width: 212rpx;
      height: 80rpx;
      line-height: 80rpx;
      border-radius: 100rpx;
      background: linear-gradient(180deg, rgba(253, 230, 179, 1) 0%, rgba(255, 246, 246, 0) 100%);
      color: rgba(16, 16, 16, 1);
      font-size: 28rpx;
      text-align: center;
          word-break: break-all;
         
    }
    .shim1.yanse1{
      background: linear-gradient(180deg, rgba(249,172,65,1) 0%,rgba(249,191,65,0) 100%);
      position: relative;
      margin-bottom: 10rpx;
      .ttt1{
        // box-shadow: 0px 1px 5px 0px rgba(16,16,16,0.35);
        font-weight: bold;
        color: rgba(255,246,228,1);
        font-size: 28rpx;
      }
      .ttt2{
        display: inline-block;
        min-width: 48rpx;
        height: 24rpx;
        border-radius: 100rpx;
        line-height: 24rpx;
        background-color: rgba(216,30,6,1);
        color: rgba(255,255,255,1);
        font-size: 24rpx;
        top:0;
        right: 0;
        position: absolute;
      }
    }
    .shim1.yanse2{
      background: linear-gradient(180deg, rgba(0,0,0,1) 0%,rgba(249,191,65,0) 100%);
      margin-bottom: 10rpx;
       overflow: hidden;
      .t1{
        color: #fff;
        font-size: 14px;
        font-weight: bold;
        font-style: italic;
      }
      .t2{
        color: rgba(249,172,65,1);
        font-size: 34rpx;
        font-weight: bold;
        font-style: italic;
      }
    }
    .shim1.yanse3{
      background: linear-gradient(180deg, rgba(216,30,6,1) 0%,rgba(249,191,65,0) 100%);
      color: #fff;
      font-weight: bold;
    }
    .shim2_img {
      width: 160rpx;
      height: 160rpx;
      border-radius: 100rpx;
    }
  }
  
  .shimb {
    color: rgba(16, 16, 16, 1);
    font-size: 28rpx;
    width: 100%;
    text-align: center;
    margin-bottom: 34rpx;
  
    text {
      margin-left: 16rpx;
    }
    .shimb111{
      line-height: 56rpx;
      color: rgba(16,16,16,1);
      font-size: 40rpx;
      font-weight: bold;
    }
    .shimb222{
      width: 160rpx;
      height: 50rpx;
      line-height: 50rpx;
      border-radius: 100rpx;
      background: linear-gradient(180deg, rgba(249,191,65,1) 0%,rgba(249,191,65,0) 99%);
      text-align: center;
      color: rgba(16,16,16,1);
      font-size: 28rpx;
      margin: 0 auto;
      margin-top: 16rpx;
    }
  }
  .chunfe{
    min-width: 200rpx;
    height: 60rpx;
    line-height: 60rpx;
    border-radius: 100rpx;
    background: linear-gradient(180deg, rgba(249,191,65,1) 0%,rgba(238,238,238,1) 100%);
    text-align: center;
    color: rgba(0,0,0,1);
    font-size: 12px;
    text-align: left;
    font-style: italic;
    font-weight: bold;
    position: relative;
    margin: 0 18rpx;
    .chunfe_t1{
      position: absolute;
      left: -10rpx;
      top:0;
      width: 56rpx;
      height: 24rpx;
      border-radius: 100rpx;
      line-height: 24rpx;
      background: linear-gradient(180deg, rgba(0,0,0,1) 0%,rgba(249,191,65,1) 100%);
      color: #fff;
      font-weight: bold;
      font-size: 20rpx;
      text-align: center;
    }
    .chunfe_t2{
      display: block;
      width: 100%;
      text-align: center;
    }
  }
  .kianh {
    width: 100%;
    height: auto;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0 auto;
    .guancCliz_y {
      width: 400rpx;
      justify-content: flex-end;
      margin-right: -40rpx;
  
      // background: #f00;
      .guancCliz_y1 {
        width: 150rpx;
        height: 60rpx;
        border-radius: 100rpx 0px 0px 100rpx;
        background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(255, 246, 228, 1) 100%);
        text-indent: 20rpx;
        color: rgba(249, 191, 65, 1);
        font-size: 28rpx;
        line-height: 60rpx;
        font-style: italic;
      }
  
      .guancCliz_y2 {
        width: 210rpx;
        height: 60rpx;
        border-radius: 100rpx;
        background: linear-gradient(180deg, rgba(249, 191, 65, 1) 0%, rgba(255, 246, 228, 1) 100%);
        font-size: 28rpx;
        line-height: 43rpx;
        position: relative;
        z-index: 1;
        left: -50rpx;
        text-align: center;
        color: rgba(0, 0, 0, 1);
        font-size: 24rpx;
        font-weight: bold;
        font-style: italic;
  
        text {
          color: rgba(216, 30, 6, 1);
          font-size: 48rpx;
  
        }
      }
    }
  }
  
  .woLid {
    width: 100%;
    height: auto;
    margin-top: 40rpx;
    padding: 0 20rpx;
    box-sizing: border-box;
  
    .woLidT {
      width: 100%;
      padding: 0 20rpx;
      box-sizing: border-box;
      margin-bottom: 10rpx;
  
      .woLidTz {
        color: rgba(0, 0, 0, 1);
        font-size: 36rpx;
      }
  
      .woLidTy {
        width: 212rpx;
        height: 90rpx;
        border-radius: 100rpx;
        background: linear-gradient(180deg, rgba(253, 230, 179, 1) 0%, rgba(255, 246, 246, 0) 100%);
        line-height: 90rpx;
        text-align: center;
        color: rgba(16, 16, 16, 1);
        font-size: 14px;
      }
    }
  }
</style>